<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const router = useRouter();
const activeBtn = ref([
    1, 0, 0, 0
])
const showPage = function (e: any) {

    const go = e.target.dataset.to as string;
    for (let i in activeBtn.value) {
        activeBtn.value[i] = 0;
        if (i == go) {
            activeBtn.value[i] = 1;
        }
    }
    switch (go) {
        case "0":
            console.log('路由到用户信息管理');
            router.push({ path: '/index/userInfo' });
            break;
        case "1":
            console.log('路由到健康码');
            router.push({ path: '/index/healthCode' });
            break;
        case "2":
            console.log('路由到用户行程');
            router.push({ path: '/index/userLocation' });
            break;
        case "3":
            console.log('路由到疫苗管理');
            router.push({ path: '/index/vaccine' });
            break;
        default:
            break;
    }
}
</script>

<template>
    <div id="aside" @click="showPage">
        <li :class="{ 'active': activeBtn[0] }" data-to="0">用户信息管理</li>
        <li :class="{ 'active': activeBtn[1] }" data-to="1">健康码管理</li>
        <li :class="{ 'active': activeBtn[2] }" data-to="2">用户行程</li>
        <li :class="{ 'active': activeBtn[3] }" data-to="3">疫苗管理</li>
    </div>
    <router-view name="userInfoManagement" />
    <router-view name="healthCode" />
    <router-view name="userLocation" />
    <router-view name="vaccine" />
</template>

<style scoped lang="css">
div {
    color: black;
}

ul {
    height: 100%;
}

li {
    list-style: none;
    cursor: pointer;
}

#aside {
    height: 100vh;
    background-color: #f5f5f5;
    max-width: 200px;
}

#aside li {
    height: 10%;
    width: 200px;
    max-height: 110px;
    min-height: 80px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#aside li:hover {
    color: #535bf2;
    background-color: #fff;
}

.active {
    color: #535bf2;
    background-color: #fff;
}
</style>
